<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>抽奖页面</title>
    <style type="text/css">
      .price-list{width: 45%;height: 50px;line-height: 50px;float: left;margin-left: 3%;margin-bottom: 15px;background:green;color: #fff;}
      .active{background: red;}
      button{width:100%;text-align:center;border-radius:3px;}
      .button2{font-size:16px;padding:8px 0;border:1px solid #adadab;color:#000000;background-color: #e8e8e8;background-image:linear-gradient(to top, #dbdbdb, #f4f4f4);background-image:-webkit-gradient(linear, 0 100%, 0 0, from(#dbdbdb),to(#f4f4f4));box-shadow: 0 1px 1px rgba(0,0,0,0.45), inset 0 1px 1px #efefef; text-shadow: 0.5px 0.5px 1px #ffffff;}
      .button2:active{background-color: #dedede;background-image: linear-gradient(to top, #cacaca, #e0e0e0);background-image:-webkit-gradient(linear, 0 100%, 0 0, from(#cacaca),to(#e0e0e0));}
      #mess_share{margin:15px 0;}
      #share_1{float:left;width:49%;}
      #share_2{float:right;width:49%;}
      #mess_share img{width:22px;height:22px;}
      #cover{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#000000;opacity:0.7;}
      #guide{display:none;position:absolute;right:18px;top:5px;z-index:19999;}
      #guide img{width:260px;height:180px;}
    </style>

<html>
<body> 
    <div style="text-align: center;margin-top: 30px">
    {if condition="$Think.session.user_mobile"} 用户：{$Think.session.user_mobile} 剩余抽奖次数 :<span id="now-number">{$user_info['now_number']}</span> <a href="{:url('Index/prize_list')}">中奖记录</a>
    {else /}
    <a href="{:url('Login/index')}" > 登录</a> &nbsp;&nbsp;| <a href="{:url('Register/index')}"> 注册</a>
    {/if}
    </div>
    <div class="activity" style="text-align: center;margin:0 auto;margin-top: 30px;">
        {volist name="list" id="data"}
        <div class="price-list" data-id="{$data.id}">{$data.name}</div>
        {/volist}
    </div>
    <div style="clear: both"></div>
    <div style="text-align: center;">
        <button id="drawPrice" type="button" class="btn btn-warning" style="width: 120px;margin-top: 20px;">开始抽奖</button>
    </div>
   <p style="text-align: center;margin-top: 30px">登录以后每天第一次分享可额外增加一次抽奖机会</p>
    <div class="list" style="width: 80%;margin:0 auto">
    <div id="mess_share">
        <div id="share_1">
            <button id="onMenuShareAppMessage" class="button2" >分享给朋友</button>
        </div>
    <div id="share_2">
        <button id="onMenuShareTimeline" class="button2")">分享到朋友圈</button>
    </div>
       <div class="clr"></div>
  </div>
</div>
   <input id="t_id" type="hidden" value="">
</body>
<script type="text/javascript">
  
  var priceCount = $(".price-list").length;
  
  //抽奖中
  function beginDrawPrice(){ 
    var i = 0;  
    var timer = setInterval(function(){
        i = i > 7 ? 0 : i;
        $(".price-list").removeClass('active');
        $(".price-list").eq(i).addClass('active');
        i++;
    },150);
    $("#t_id").val(timer);
  }
  

  function drawPriceResult(){
      $.get("{:url('Index/drawPriceResult')}",function(data){
          setTimeout(function(){
            var timer = setInterval(
              function(){
                  var i = $('.price-list').eq($('.price-list').index($('.active'))).attr('data-id');
                  if(i == data.id){
                      data.id == 8 ?  alert('未中奖谢谢参与') : alert('恭喜你获得'+data.name);
                      clearInterval($("#t_id").val());
                      clearInterval(timer);

                      var now_number = $("#now-number").text();

                      $("#now-number").text(now_number-1);
                      $("#drawPrice").attr('disabled',false);
                  }
              },100);
          },4000)
      });
  }
  //
  $("#drawPrice").click(function(){
      var now_number = $("#now-number").text();
    //判断用户是否登录
      $.get("{:url('Login/isLogin')}",function(data){
          if(data.is_login == 1){
              if(now_number == 0){
                  alert('抽奖次数已用完');
              }else{
                  beginDrawPrice();
                  $("#drawPrice").attr('disabled',true);
                  //抽奖结果
                  drawPriceResult();
              }
         }else{
            location.href="{:url('Login/index')}";
         }
      });
  })
</script>


<script type="text/javascript">
    var _system = {
        $:function(id){return document.getElementById(id);},
   
    _client : function(){
        return {w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight,bw:document.documentElement.clientWidth,bh:document.documentElement.clientHeight};
    },

    _scroll : function(){
        return {x:document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft,y:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop};
    },

    _cover : function(show){
        if(show){
            this.$("cover").style.display = "block";
            this.$("cover").style.width   = (this._client().bw>this._client().w?this._client().bw:this._client().w)+"px";
            this.$("cover").style.height  = (this._client().bh>this._client().h?this._client().bh:this._client().h)+"px";
        }else{
           this.$("cover").style.display="none";
        }
    },

    _guide : function(click){
        this._cover(true);
        this.$("guide").style.display = "block";
        this.$("guide").style.top     = (_system._scroll().y+5)+"px";

        window.onresize = function(){_system._cover(true);_system.$("guide").style.top=(_system._scroll().y+5)+"px";};
        if(click){_system.$("cover").onclick = function(){
            _system._cover();
            _system.$("guide").style.display="none";
            _system.$("cover").onclick=null;
            window.onresize=null;
        };}
    },
    _zero : function(n){
        return n<0?0:n;
    }
}
</script>
<div id="cover"></div>
<div id="guide"><img src="__ROOT__/static/img/guide1.png"></div>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script>

  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
  wx.config({
    debug: false,
    appId:     "{$sign_package['appId']}",
    timestamp: "{$sign_package['timestamp']}",
    nonceStr:  "{$sign_package['nonceStr']}",
    signature: "{$sign_package['signature']}",
    jsApiList: [
       'onMenuShareTimeline',
       'onMenuShareAppMessage',
    ]
  });
  

  wx.ready(function () {
  // 2. 分享接口
  // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
    document.querySelector('#onMenuShareAppMessage').onclick = function () {
      _system._guide(true);
      wx.onMenuShareAppMessage({
        title: '欢乐抽奖活动',
        desc: '抽奖活动',
        link: '{$user_info["share_link"]}',
        trigger: function (res) {
          // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          //alert('用户点击发送给朋友');
        },
        success: function (res) {
            doShare(1);
        },
        cancel: function (res) {
        },
        fail: function (res) {
        }
      });
    };

    // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
    document.querySelector('#onMenuShareTimeline').onclick = function () {
      _system._guide(true);
      wx.onMenuShareTimeline({
        title: '欢乐抽奖活动',
        desc: '抽奖活动',
        link: '{$user_info["share_link"]}',
        trigger: function (res) {
          // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          // alert('用户点击分享到朋友圈');
        },
        success: function (res) {
            setTimeout(function(){
                doShare(2);
            },500)
        },
        cancel: function (res) {
        },
        fail: function (res) {

        }
      });
      //alert('已注册获取“分享到朋友圈”状态事件');
    };
  });

  function doShare(type){
    $.get("{:url('index/doShare')}",{type:type},function(data){
        if(data.code == 1){
            var now_number = Number($("#now-number").text());
            $("#now-number").text(now_number+1);
            alert('今日第一次分享，抽奖次数加1');
        }
    },'json');
    $("#guide").hide();
    $("#cover").hide();
  }

</script>
</html>